<template>
  <div>
    <h2>短信验证登录/注册</h2>
    <p>新手机号会自动注册请详读<b>豆瓣使用协议、豆瓣个人信息保护政策</b></p>
    <van-form @failed="onFailed">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="value1"
          required
          name="pattern"
          label="手机号"
          :rules="[
            { pattern, message: '请输入手机号' },
            { required, message: '请输入正确的手机号' },
          ]"
        />

        <!-- 验证码 -->
        <van-cell-group inset>
          <van-field required v-model="sms" center clearable label="短信验证码">
            <template #button>
              <van-button size="small" type="primary" :disabled="disabled"
                >发送验证码</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "../Axios/index";
// import mk from '../Mock/index'
const value1 = ref("");
const pattern = /^1[3-9]\d{9}$/;
const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
// disabled.value=true
const required = () => {
  if (pattern.test(value1.value)) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
};
axios.get('/getyzm').then(resp=>{
    console.log(resp);
})

//倒计时
let time = 5
let djs

</script>

<style lang="scss" scoped>
h2 {
  text-align: center;
}
p {
  text-align: center;
  font-size: 14px;
  b {
    color: #2bf902;
  }
}
</style>